<template>
  <div class="login-bg">
      <div class="login-contain">
        <div class="login-header">
          <img src="../assets/logo1.png" class="loginimg"/>
          <p>宝爸宝妈</p>
          <p class="p1">登录</p>
        </div>
        <div class="form-group">
          <div class="form-item">
            <label for="username">
              <img src="../assets/user.png" class="userimg">
            </label>
            <input id="username" type="text" placeholder="请输入手机号 / 账号" class="userinput" v-model="uname">
          </div>
          <div class="form-item">
            <label for="password">
              <img src="../assets/password.png" class="userimg">
            </label>
            <input id="password" type="password" placeholder="请输入密码" class="userinput" v-model="upwd">
          </div>
          <div class="button-group">
            <button class="login-btn" id="doLogin" @click="login">登录提交</button>
          </div>
          <!-- 注册账号及忘记密码 -->
          <div class="zhmm">
              <span @click="user" class="zczh">注册账号</span>
              <span @click="wjpwd" class="wjmm">忘记密码?</span>
          </div>
          <div class="order-login">
            <p class="order-login-line">
              其他登录方式
            </p>
            <div class="order-login-box">
              <div>
                <a href="#">
                  <img @click="wxdl" src="../assets/wechat-login.png" style="width:45px;height:45px">
                  <p>微信登录</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname:"",
      upwd:"",
    }
  },
  methods:{
    login(){
       //功能:完成用户登录操作 16:30
        //*1:获取用户输入用户名
        var u = this.uname;
        //*2:获取用户输入密码
        var p = this.upwd;
        //console.log(u+"_"+p);
        //*3:创建正则表达式验证用户名和密码
        //  3~12 字母数字
        var reg = /^[a-z0-9]{3,12}$/i;
        //*4:用户验证失败 提示短消息
        if(!reg.test(u)){
           this.$toast("用户名格式不正确");
           return;//失败停止执行
        }
        //*5:密码验证失败 提示短消息
        if(!reg.test(p)){
          this.$toast("密码格式不正确");
          return;//失败停止执行
        }  
        //6:发送ajax 请求 axios
        var url = "login";
        var obj = {uname:u,upwd:p}
        this.axios.get(url,{params:obj}).then(res=>{ 
       //7:获取服务器返回结果
       //7.1:登录失败  提示
      if(res.data.code==-1){
       this.$toast("用户名和密码有误");
      }else{
       //7.2:登录成功  跳转商品首页组件
       this.$router.push("/bbbm")
      }
      })
     },
     user(){
        this.$router.push("/user")
     },
     wjpwd(){
       this.$router.push("/wjpwd")
     },
     wxdl(){
       this.$router.push("/wxdl")
     }
   }
}
</script>

<style scoped>
a{
  text-decoration:none;
  color:black;
  list-style:none;
}
div,input,button,p,a{
  margin:0;
  padding:0;
}
.login-bg{
  width: 375px;
  height: 667px;
  background:url(../assets/login_bg.jpg)no-repeat fixed;
  color: #ffffff;
  background-size:100% 100%;
}
.login-contain{
  position:absolute;
  left:30px;
  top:25px;
  width:85%;
}
.login-header{
  padding:5%;
}
.loginimg{
    width:80px;
    height:80px;
}
.login-header p{
  font-size: 15px;
  color:#0a0a0a;
  font-weight:bold;
  text-align:center;
  letter-spacing:2px;
  text-shadow:0.1em 0.15em 0.1em #e0efec;
  margin-top:10px;
}
.login-header .p1{
  font-size: 25px;
  color:#fc6d8b;
  font-weight:bold;
  text-align:center;
  letter-spacing:2px;
  text-shadow:0.1em 0.15em 0.1em #f1b2bf;
  margin-top:10px;
}
.form-group{
  padding:5%;
}
.form-item{
  margin-top:5%;
  padding:0 10px;
  /* border-radius:20px;
  background-color:#B3DFE2; */
}
.userinput{
  outline:none;
  border:0;
  background-color:rgba(0,0,0,0);
  color:#6d6868;
  height:40px;
  font-size:15px;
  width:60%;
  margin-left:-23%;
}
.userimg{
  width:25px;
  position:absolute;
  margin-top:8px;
  left:5px;
}
.button-group{
  padding:5%;
}
.button-group .login-btn{
  background-color:#fc6d8b;
  color:#ffffff;
  outline:none;
  border:0;
  width:115%;
  height:50px;
  margin-top:10%;
  border-radius:5px;
  margin-left:-6%;
  font-size:15px;
}
.zhmm{
    margin-left:0px;
    margin-right:0px;
}
.zczh{
    float: left;
    color:#fc6d8b;
    font-size:13px;
}
.wjmm{
    float: right;
    color:#fc6d8b;
     font-size:13px;
}
.order-login{
  padding:20%;
}
.order-login-line{
  display: block;
  position: relative;
  text-align: center;
  font-size:14px;
  color: #fc6d8b;
}
.order-login-line::before{
  left:10%;
  content:'';
  position: absolute;
  top:50%;
  background:#fc6d8b;
  width:20%;
  height:1px;
}
.order-login-line::after{
  right:10%;
  content:'';
  position: absolute;
  top:50%;
  background:#fc6d8b;
  width:20%;
  height:1px;
}
.order-login-box{
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:20px;
}
.order-login-box div{
  flex: 1;
  text-align: center;
}
.order-login-box div p{
  text-align: center;
  font-size: 14px;
  color:#ffffff;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
			color:#6d6868;
		}
</style>